
{% load static %}

{% block content %}
<div class="chart-container" style="position: relative; height:60vh; width:80vw">
    <canvas id="lineChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('lineChart').getContext('2d');

        const lineChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: JSON.parse('{{ labels|escapejs }}'),
                datasets: [
                    {
                        label: '平均温度 (°C)',
                        data: JSON.parse('{{ temperatures|escapejs }}'),
                        borderColor: 'rgb(255, 99, 132)',
                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
                        tension: 0.3,
                        fill: true,
                        yAxisID: 'y'
                    },
                    {
                        label: '降雨量 (mm)',
                        data: JSON.parse('{{ rainfall|escapejs }}'),
                        borderColor: 'rgb(54, 162, 235)',
                        backgroundColor: 'rgba(54, 162, 235, 0.1)',
                        tension: 0.3,
                        fill: true,
                        yAxisID: 'y1'
                    }
                ]
            },
            options: {
                responsive: true,
                interaction: {
                    mode: 'index',
                    intersect: false,
                },
                plugins: {
                    title: {
                        display: true,
                        text: '2023年上半年天气数据'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label.includes('温度')) {
                                    label += ': ' + context.parsed.y + '°C';
                                } else {
                                    label += ': ' + context.parsed.y + 'mm';
                                }
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        title: {
                            display: true,
                            text: '温度 (°C)'
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        title: {
                            display: true,
                            text: '降雨量 (mm)'
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });
    });
</script>
{% endblock %}